<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>模拟用户登陆</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<style>
			.container{
				width:300px;
			}
		</style>
		
		<script src="js/jquery.min.js"></script>
		
	</head>

	<body>

		<div class="container">
			<div>
				<h3>用户登录</h3>

				<div id="msg" style="display: none;">登陆成功!</div>

				<div class="form-group">
					<label>用户名：</label>
					<input type="text" class="form-control" autocomplete="off" 
					placeholder="请输入用户名..." name="username" id="username" />
				</div>

				<div class="form-group">
					<label>密码：</label>
					<input type="password" class="form-control" 
					placeholder="请输入密码..." name="password" id="password" />
				</div>

				<div>
					<button id="btnSubmit" onclick="doSubmit()" 
					class="btn btn-success">登录</button>
					<button id="btClear" onclick="doClear()" 
					class="btn btn-danger">清空</button>
					
				</div>

			</div>
	</body>

	<script>
		function jsdoSubmit() {

			//获取用户名
			var username = document.getElementById("username");
			//console.log(username);      //对象
			console.log(username.value); //属性值

			//获取密码
			var password = document.getElementById("password");
			console.log(password.value);

			//获取到msg框，设置并展示新值，颜色
			var msg = document.getElementById("msg");
			msg.innerText = username.value + "登陆成功！"

			//改变msg样式
			msg.style = "display:block; color:blue; background-color: #A6E1EC;margin: 10px;padding: 10px";
		}
		function doSubmit(){
			var username=$("#username");
			var password=$("#password");		
			
			var msg=$("#msg");
			msg.text(username.val()+",登陆成功!");
			
			msg.css("display","block");
			msg.css("color","yellow");
			msg.css("background-color","#5a5cec");
			msg.css("margin","10px");  //外围空白
			msg.css("padding","10px"); //内部空白
			
		}

		function jsdoClear() {
			document.getElementById("username").value = '';
			document.getElementById("password").value = "";
		}
		
		//jQuery语法实现
		function doClear(){
			//选择器selector .class #属性
			$("#username").val('');
			$("#password").val("");
		}
	</script>
</html>
